import {
  dl
} from './dl/index.js';

let t = 0
const root = document.querySelector('#root');
const span = document.querySelectorAll('span');
const projectItem = document.querySelectorAll('.project div');
const rootBg = document.querySelector('#root-bg');
const boxSearchContainer = document.querySelector('.box_search');
// 输入搜索框
const searchInput = boxSearchContainer.querySelector('input');
// chatgpt聊天框
const chatContainer = document.querySelector('.box_search .chatgpt-container');
const aiTip = chatContainer.querySelector('.ai-tip');
const chatBody = chatContainer.querySelector('#chat-body');
// 热度列表
const rankingHeader = document.querySelector('.ranking-header');

const methods = {
  /** 时间定时 */
  time () {
    clearTimeout(t); //清除定时器
    const dt = new Date();
    let h = dt.getHours(); //获取时
    let m = dt.getMinutes(); //获取分
    if (m < 10) m = '0' + m;
    document.getElementById('showTime').innerHTML = h + ':' + m;
    t = setTimeout(methods.time, 1000);
    const itemHeader = document.querySelectorAll('.item-header');
    if (m % 2 === 0) {
      rootBg.style.backgroundImage = 'url(./bg.webp)'
      span.forEach(item => item.style.color = '#399953')
      projectItem.forEach(item => item.style.backgroundColor = 'rgba(255, 255, 255, 0.5)')  
      if (rankingHeader.classList.contains('blue')) {
        rankingHeader.classList.remove('blue');
      }
      if (!rankingHeader.classList.contains('pink')) {
        rankingHeader.classList.add('pink');
      }
      itemHeader.forEach(item => item.style.background = 'linear-gradient(135deg, #ff6b6b, #ff8e8e)')
    } else {
      rootBg.style.backgroundImage = 'url(./bg.jpg)'
      span.forEach(item => item.style.color = '#fff')
      projectItem.forEach(item => item.style.backgroundColor = 'rgba(0, 0, 0, 0.5)')  
      if (rankingHeader.classList.contains('pink')) {
        rankingHeader.classList.remove('pink');
      }
      if (!rankingHeader.classList.contains('blue')) {
        rankingHeader.classList.add('blue');
      }
      itemHeader.forEach(item => item.style.background = 'linear-gradient(135deg, #74b9ff, #0984e3)')
    }
  },
  /** 监听键盘事件 */
  keydown (e) {
    e = e || window.e;
    if (e.keyCode == 13) {
      methods.search()
    }
  },
  /** 输入框搜索 */
  search () {
    if (searchInput.value != '') {
      // const rightDiv = document.createElement('div');
      // rightDiv.classList.add('chat-child', 'right')
      // const span = document.createElement('p');
      // span.classList.add('bubble', 'bubble-right');
      // span.innerText = searchInput.value;
      // rightDiv.appendChild(span);
      // chatBody.appendChild(rightDiv);
      // setTimeout(() => {
      //   methods.requestAi(searchInput.value)
      //   searchInput.value = '';
      // }, 700)
      window.open(`https://cn.bing.com/search?q=${searchInput.value}`, '_blank');
    }
  },
  /** 输入框聚焦 */
  focus() {
    rootBg.classList.add('blur')
    chatContainer.classList.add('block')
    searchInput.setAttribute('placeholder', '')
    // 插入ai提示语
    methods.insertAiTip()
  },
  /** 输入框失焦 */
  blur() {
    if (rootBg.className.indexOf('blur') !== -1) {
      rootBg.classList.remove('blur');
      chatContainer.classList.remove('block');
      searchInput.setAttribute('placeholder', 'AI搜索');
    }
  },
  /** 内容跳转 */
  navTo(url, extra) {
    let href;
    if (extra === 'extra') {
      href = url;
    } else {
      href = window.location.origin + url;
    }
    window.open(href, '_blank');
  },
  /**
   * 插入ai提示语
   */
  insertAiTip() {
    aiTip.classList.add('fade-in')
  },
  /**
   * 请求chat 回复
   * @param {*} searchKey 
   */
  requestAi(searchKey) {
    chatContainer.scrollTo({ behavior: 'smooth', top: chatContainer.scrollHeight })
    const leftDiv = document.createElement('div');
    leftDiv.classList.add('chat-child', 'left');
    const span = document.createElement('p');
    span.classList.add('bubble', 'bubble-left');
    span.innerText = dl(searchKey);
    leftDiv.appendChild(span);
    chatBody.appendChild(leftDiv);
  }
}

// 时间定时实例化
methods.time();
searchInput.addEventListener('keydown', methods.keydown);
document.addEventListener('click', e => {
  if (!boxSearchContainer.contains(e.target)) {
    methods.blur();
  }
});
searchInput.addEventListener('focus', methods.focus);
boxSearchContainer.addEventListener('click', methods.focus);

export {
  methods
}
